<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <style>
    input {
      width: 200px;
      height: 30px;
      padding: 3px 10px;
    }
  </style>
</head>

<body>
  <div id="app">


    <abc v-if="isShow"></abc>

    <button class="btn btn-info" v-on:click="show">提交</button>
  </div>

  <script>

    var B = Vue.extend({
      template: "<div>BBBBBBBBBBBBBBBBBBBBBBB</div>",
      data: function () {
        return {};
      },
      created: function () {
        console.log("b");
      }
    });

    var my_mixin = {
      created() {
        console.log("我是my_mixin", 'created');
      },
      destroyed() {
        console.log("我是my_mixin", 'destroyed')
      },
      methods: {
        sayHello: function () {
          console.log(this.name);
        }
      }
    };

    Vue.component("abc", {
      template: "<div>{{times}}</div>",
      props: ["no"],
      mixins: [my_mixin],
      data: function () {
        return {
          times: 0
        };
      },
      created: function () {
        console.log("我是abc", 'created')
      },
      activated: function () {
        console.log(this.no + ":activated");
      },
      destroyed() {
        console.log("我是abc", 'destroyed')
      },
    });



    var app = new Vue({
      el: "#app",
      mixins: [my_mixin],
      data: {
        name: '我是自己',
        isShow: true
      },
      created() {
        console.log("我是app", 'created');
      },
      destroyed() {
        console.log("我是app", 'destroyed')
      },
      methods: {
        sayHello: function () {
          console.log(this.name);
        },
        show: function () {
          this.isShow = !this.isShow;
        }
      }
    });


  </script>
</body>

</html>